<template>
  <view class="realTimeData">
    <view class="realTimeDataTit">昨日经营概况</view>

    <view class="realTimeDataBox">
      <view class="item" v-for="(item, index) of items" :key="index">
        <view class="num">
          <view>{{ item.num }}</view>
        </view>
        <view class="name">{{ item.name }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.realTimeData {
  border-radius: 20rpx;
  background: #fff;
}

.realTimeDataTit {
  padding: 24rpx;
  font-size: 28rpx;
  color: #262626;
  font-weight: bold;
}

.realTimeDataBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0 44rpx;

  .item {
    width: 25%;
    padding: 28rpx 5rpx 0;
    overflow: hidden;
    text-align: center;
  }

  .num {
    height: 60rpx;
    line-height: 60rpx;
    overflow: hidden;
    font-size: 36rpx;
    color: #262626;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .name {
    padding: 10rpx 0;
    font-size: 24rpx;
    color: #8c8c8c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
